<script>
export default {
  name: "shoppingPart",
  data() {
    return {
      list: [{id: 0, name: '手机', price: 5000}, {id: 1, name: '篮球', price: 100}],
      // isChoose:false,
      // totalPrice:0
    }
  },
  methods:{
    choose(item){
      // console.log('选择')
      // console.log(item)
      // this.totalPrice
      item.checked=!item.checked
      console.log(this.list)
    }
  },
  created() {
    this.list=this.list.map(item=>{
      return {...item,checked:false}
    })
  },
  computed:{
    totalPrice(){
      return this.list.filter(item=>item.checked).reduce((accumulator,currentValue)=>{
        return accumulator+currentValue.price
      },0)
    }
  }
}
</script>

<template>
  <div>
    购物车
    <div v-for="item in list" :key="item.id">
      <input type="checkbox" :checked="item.checked" @input="choose(item)">
      {{ item.name }}----{{ item.price }}
    </div>
    <p>总价：{{totalPrice}}</p>
  </div>
</template>

<style scoped lang="less">

</style>